<script setup lang="ts">
import { reactive, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number, Boolean],
    default: false
  },
  list: {
    type: Array,
    default: () => []
  },
  option: {
    type: Object,
    default: () => { }
  },
  disabled: {
    type: Boolean,
    default: () => false
  }
})

const emit = defineEmits(['update:modelValue'])

const state = reactive({
  data: props.list as any,
  inputValue: props.modelValue ? props.modelValue : ''
})

const change = () => {
  emit('update:modelValue', state.inputValue)
}

watch(
  () => props.modelValue,
  (val: any) => {
    state.inputValue = val
  },
  { immediate: true }
)
</script>

<template>
  <el-radio-group v-model="state.inputValue" :disabled="props.disabled" @change="change">
    <el-radio :key="j" v-for="(i, j) in state.data" :label="i[props.option?.value || 'value']"
      :disabled="i?.disabled || false">
      {{ i[props.option?.label || 'label'] }}
    </el-radio>
  </el-radio-group>
</template>

<style lang="scss" scoped></style>
